<template>
  <el-card class="card">
    <div style="text-align: center; margin-bottom: 30px">
      <b>修改个人信息</b>
    </div>

    <el-form label-width="60px">
      <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          :action="baseApi + '/avatar'"
          :headers="token"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img
            v-if="form.avatarUrl"
            :src="baseApi + form.avatarUrl"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="昵称">
        <el-input v-model="form.nickname" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="form.address" autocomplete="off"></el-input>
      </el-form-item>
      <el-button
        type="primary"
        style="font-size: 20px; margin-left: 190px; margin-top: 20px"
        @click="save"
      >
        <i class="iconfont icon-r-yes" style="font-size: 22px"></i> 确定
      </el-button>
    </el-form>

    <el-popover placement="right" width="200" trigger="click">
      <el-form>
        <el-form-item label="新密码">
          <el-input
            type="password"
            v-model="resetPsw.newPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
            type="password"
            v-model="resetPsw.confirmPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-button
          style="font-size: 20px"
          type="primary"
          @click="toResetPassword"
        >
          <i class="iconfont icon-r-yes" style="font-size: 22px"></i> 确定
        </el-button>
      </el-form>
      <el-button
        slot="reference"
        type="warning"
        style="margin-left: 190px; margin-top: 20px; font-size: 20px"
        @click="resetPsw = { newPassword: '', confirmPassword: '' }"
      >
        <i class="iconfont icon-r-lock" style="font-size: 22px"></i> 重置密码
      </el-button>
    </el-popover>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
import md5 from "js-md5";

const store = useStore();

// Reactive data
const form = ref<any>({});
const baseApi = ref<string>(store.state.baseApi);
const user = ref<any>(
  localStorage.getItem("user")
    ? JSON.parse(localStorage.getItem("user") || "{}")
    : {}
);
const resetPsw = ref<any>({
  newPassword: "",
  confirmPassword: "",
});
const imageUrl = ref<string>("");

// Computed
const token = computed(() => ({ token: user.value.token }));

// Methods
const toResetPassword = () => {
  if (resetPsw.value.newPassword.trim() === "") {
    store.state.message.error("新密码不能为空");
    return;
  }
  if (resetPsw.value.confirmPassword !== resetPsw.value.newPassword) {
    store.state.message.error("两次密码不一致");
    return;
  }

  store.state.request
    .get(
      `/user/resetPassword?id=${user.value.id}&newPassword=${md5(
        resetPsw.value.newPassword
      )}`
    )
    .then((res: any) => {
      if (res.code === "200") {
        store.state.message.success("修改成功");
        resetPsw.value = {
          newPassword: "",
          confirmPassword: "",
        };
      } else {
        store.state.message.error(res.msg);
      }
    });
};

const handleAvatarSuccess = (res: any) => {
  imageUrl.value = res.data;
  form.value.avatarUrl = imageUrl.value;
};

const save = () => {
  store.state.request.post("/user", form.value).then((res: any) => {
    if (res.code === "200") {
      store.state.message.success("保存成功");
      // Update user data
      Object.assign(user.value, form.value);
      localStorage.setItem("user", JSON.stringify(user.value));
      window.location.reload();
    } else {
      store.state.message.error(res.msg);
    }
  });
};

// Lifecycle
onMounted(() => {
  store.state.request
    .get("/userinfo/" + user.value.username)
    .then((res: any) => {
      if (res.code === "200") {
        form.value = res.data;
      } else {
        store.state.message.error(res.msg);
      }
    });
});
</script>

<style scoped>
.card {
  width: 500px;
  margin: 80px auto;
  padding: 30px;
}
.avatar-uploader {
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
  display: block;
}
</style>
